<template>
	<view class="find-page">
		<view class="options">
			<view class="type">
				<view class="label">所在地</view>
				<view class="list">
					<view class="item active" v-if="!longList.length && !shortList.length">不限</view>
					<view class="item" :class="{active:item==cityName}"
						v-for="(item,index) in (addressMore?longList:shortList)" :key="index"
						@click="checkAddress(item)">
						{{item==''?'不限':item}}
					</view>
					<view class="item" v-if="longList.length>3" v-show="!addressMore" @click="addressMore=!addressMore">
						更多
						<text></text>
					</view>
					<view class="item" v-show="addressMore" @click="addressMore=!addressMore">收起
						<text></text>
					</view>
				</view>
			</view>

			<view class="type">
				<view class="label">出借额度</view>
				<view class="list">

					<view class="item" v-for="(item,index) in typeMore?linesList:linesList.filter((item, index) => {
              return index <5
            })" :key="index" :class="{active:item==linesEd}" @click="checkLines(item)">
						{{item==''?'不限':item}}
					</view>
					<view class="item" v-show="!typeMore" @click="typeMore=!typeMore">更多
						<text></text>
					</view>
					<view class="item" v-show="typeMore" @click="typeMore=!typeMore">收起
						<text></text>
					</view>
				</view>
			</view>
			<view class="type">
				<view class="label">出借类型</view>
				<view class="list">
					<view class="item" v-for="(item,index) in loanMethodList" :key="index"
						:class="{active:item.value==loanMethod}" @click="checkType(item)">
						{{item.label==''?'不限':item.label}}
					</view>
				</view>
			</view>
			<view class="type">
				<view class="label">资方类型</view>
				<view class="list">
					<view class="item" v-for="(item,index) in funderList" :key="index"
						:class="{active:item==funderType}" @click="checkFunder(item)">
						{{item==''?'不限':item}}
					</view>
				</view>
			</view>
		</view>
		<view class="card-list">
			<view class="card-item" v-for="(item,index) in list" @click="jumpDetails(item.funderId)">
				<image v-if="item.funderLogo" :src="item.funderLogo" mode=""></image>
				<image class="logo" v-else src="../../../../static/logo.png" mode=""></image>
				<view class="content">
					<view class="titel">{{item.funderName}}</view>

					<view class="">
						<text class="lab">最高可融</text>
						<text><text class="number">{{item.loanAmount}}</text>万</text>
					</view>
				</view>
				<view class="btn">
					<button size="mini">查看详情</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/findCapital.js';
	export default {
		name: 'FindCapital',
		data() {
			return {
				addressMore: false,
				typeMore: false,
				cityName: '', //选中的地址
				linesEd: '',
				loanMethod: '',
				funderType: '',

				longList: [],
				shortList: [],

				linesList: ['', '100万以下', '100万-500万',
					'500万-1000万', '1000万-2000万', '2000万-5000万', '5000万-1亿', '1亿以上'
				],
				loanMethodList: [{
					label: '',
					value: ''
				}, {
					label: '股权融资',
					value: 1
				}, {
					label: '债权融资',
					value: 2
				}, {
					label: '其他',
					value: 3
				}],
				funderList: ['', '银行', '基金公司', '民间投资机构', '其他'],
				list: [],
				pageParams: {
					pageSize: 1000,
					pageNum: 1
				}
			}
		},
		onLoad() {

		},

		mounted() {
			api.getCityList().then(res => {
				res.data.unshift('')
				this.shortList = res.data.filter((item, index) => {
					return index < 3
				})
				this.longList = res.data
			})
			this.getData()
		},
		methods: {
			//选择地址
			checkAddress(val) {
				this.cityName = val
				this.getData()
			},
			//选择额度
			checkLines(val) {
				this.linesEd = val
				this.getData()
			},
			//选择出借类型
			checkType(val) {
				this.loanMethod = val.value
				this.getData()
			},
			//选择资方
			checkFunder(val) {
				this.funderType = val
				this.getData()
			},
			getData() {
				let start = ''
				let end = ''
				// 如果额度点选被选中
				if (this.linesEd) {
					switch (this.linesEd) {
						case '':
							break
						case '100万以下':
							start = 0
							end = 100
							break
						case '100万-500万':
							start = 100
							end = 500
							break
						case '500万-1000万':
							start = 500
							end = 1000
							break
						case '1000万-2000万':
							start = 1000
							end = 2000
							break
						case '2000万-5000万':
							start = 2000
							end = 5000
							break
						case '5000万-1亿':
							start = 5000
							end = 10000
							break
						case '1亿以上':
							start = 10000
							end = ''
							break
					}
				}
				let obj = {
					cityName: this.cityName,
					beginAmount: start,
					endAmount: end,
					loanMethod: this.loanMethod,
					funderType: this.funderType,
				}
				api.getFrontPage({
					...this.pageParams,
					...obj
				}).then(res => {
					this.list = res.data
				})
			},
			jumpDetails(id) {
				uni.navigateTo({
					url: `CapitalDetail?funderId=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F6F6F6;
	}

	.find-page {
		padding: 20rpx;
		box-sizing: border-box;
		// height: 100vh;
	}

	.options {
		margin-bottom: 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;

		.type {
			display: flex;

			.label {
				min-width: 100rpx;
				max-width: 100rpx;
				margin-right: 20rpx;
				font-weight: 500;
			}

			.list {
				flex: auto;

				.item {
					display: inline-block;
					background-color: #D9DDE7;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
					padding: 8rpx 16rpx;

					text {
						display: inline-block;
						width: 40rpx;
						height: 28rpx;
						background-image: url(../../../../static/arrow-down.svg);
						background-repeat: no-repeat;
						background-size: cover;
					}
				}

				.active {
					background-color: #0B4E9E;
					color: #fff;
				}
			}
		}
	}

	.card-list {
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 6rpx;

		.card-item {

			height: 194rpx;
			padding: 24rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #D9DDE7;
			box-sizing: border-box;

			&:last-child {
				border-bottom: 0;
			}

			image {
				min-width: 104rpx;
				max-width: 104rpx;
				height: 104rpx;

			}

			.content {
				width: 358rpx;
				height: 100%;
				margin: 0 32rpx 0 16rpx;
				font-size: 28rpx;
				padding: 20rpx 0;
				box-sizing: border-box;

				view {
					margin-bottom: 10rpx;
				}

				.titel {
					font-size: 32rpx;
					font-weight: 500;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.lab {
					margin: 0 10rpx 0 0;
				}

				.number {
					font-weight: 500;
					font-size: 32rpx;
					color: #E02020;
				}

			}

			.btn {
				flex: auto;

				uni-button {
					padding: 0;
					width: 144rpx;
					height: 50rpx;
					background-color: #0B4E9E;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}
	}
</style>
